<template>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="订单Id">
          <el-input v-model="searchWorkRecord.orderId" @keydown.enter.prevent="loadWordRecord" type="number" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="工作完成状态">
          <el-select v-model="check" @change="checkCompleted" placeholder="请选择" style="width: 120px;">
            <el-option label="已完成" :value="1"></el-option>
            <el-option label="未完成" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="loadWordRecord">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
        工作记录列表
        <el-button @click="addWorkRecord" type="primary" style="float:right;margin-top: -3px;">新增工作记录</el-button>
      </div>
      <div>
        <el-table :data="workRecordArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="empName" label="员工名字" align="center"></el-table-column>
          <el-table-column prop="orderId" label="订单Id" align="center"></el-table-column>
          <el-table-column prop="status" label="工作进度" align="center"></el-table-column>
          <el-table-column  prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column  prop="updateTime" label="更新时间" align="center"></el-table-column>
          <el-table-column  prop="endTime" label="结束时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="editeWorRecord(scope.row)" link type="primary" size="small">查看详情</el-button>
              <el-button @click="delWorkRecord(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="员工">
             <el-input v-model="workRecord.empId" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="订单Id">
             <el-input v-model="workRecord.orderId" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
        </el-row>

        <el-card>
          <el-button type="primary" @click="addWork">添加工作</el-button>
          <el-row :gutter="10" v-for="(item,index) in workRecord.workDate">
           <el-col :span="12">
             <el-form-item label="工作日期">
               <el-date-picker v-model="workRecord.workDate[index]" placeholder="请选择" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
             </el-form-item>
           </el-col>
            <el-col :span="12">
              <el-form-item label="工作内容">
                <el-input v-model="workRecord.workContent[index]" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-button type="primary" @click="delWork(index)">删除工作</el-button>
          </el-row>
        </el-card>
        <el-form-item label="备注信息">
          <el-input v-model="workRecord.remark" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="saveWorkRecord" type="primary">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog title="工作记录" v-model="workDialogVisible"
               :close-on-click-modal="false">
      <el-menu mode="horizontal"
               :default-active="selectWork"
               active-text-color="#ffd04b">
        <el-menu-item v-for="(work,index) in works.workDate" @click="showForm(index)" :index="index">
          工作：{{index}}
        </el-menu-item>
      </el-menu>
      <el-card style="margin-top: 5px;">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="订单号">
            <el-input v-model="works.orderId" disabled></el-input>
          </el-form-item>
          <el-form-item label="工作时间">
            <el-date-picker v-model="works.workDate[selectWork]" :readonly="disable" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item label="工作内容">
            <el-input v-model="works.workContent[selectWork]" :readonly="disable"></el-input>
          </el-form-item>
          <el-form-item label="工作时长">
            <el-input v-model="works.workHours[selectWork]" placeholder="请输入" :readonly="disable"></el-input>
          </el-form-item>
          <el-form-item label="工作结果">
            <el-input v-model="works.workOutcome[selectWork]" placeholder="请输入":readonly="disable"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="works.remark" placeholder="请输入" :readonly="disable"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="editeWork(selectWork)" type="primary">编辑</el-button>
          <el-button @click="saveWorkRecord" type="primary">保存</el-button>
        </template>
      </el-card>

    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const searchWorkRecord=ref({})
const workRecordArr=ref([])
const dialogTitle=ref("")
const dialogVisible=ref(false)
const workRecord=ref({})
const workDialogVisible=ref(false)
const works=ref()
const reset = () => {
  searchWorkRecord.value={}
  loadWordRecord()
}
const check=ref("")
const checkCompleted = async () => {
  searchWorkRecord.value={}
  await loadWordRecord()
  if (check.value==1){
    workRecordArr.value=workRecordArr.value.filter(item => item.workProgress == item.workTotal)
    console.log(1,workRecordArr.value)
  }else if (check.value==0){
    workRecordArr.value=workRecordArr.value.filter(item => item.workProgress != item.workTotal)
    console.log(2,workRecordArr.value)
  }
}
const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

(async function run() {
  while (true) {
    console.log("您好");
    await sleep(99999999999); //
  }
})();
const loadWordRecord = async () => {
  console.log(searchWorkRecord.value)
  await axios.post(BASE_URL+'/v1/workRecord/select',searchWorkRecord.value)
      .then((response)=>{
        if (response.data.code==2000){
          workRecordArr.value=response.data.data
          for (let w of workRecordArr.value){
            if (w.workProgress==null){
              w.workProgress=0
              w.status=0+"%"
            }else {
              let i=(w.workProgress/w.workTotal)*100
              w.status=parseInt(i.toFixed(2))+"%"
            }
          }
          console.log(workRecordArr.value)
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
onMounted(()=>loadWordRecord())
const addWorkRecord = () => {
  dialogVisible.value=true
  dialogTitle.value="新增工作记录"
  workRecord.value={workDate:[""],workContent:[""],workHours:[""],workOutcome:[""]}
}
const disable=ref(true)
const addWork = () => {
  workRecord.value.workDate.push("")
  workRecord.value.workContent.push("")
  workRecord.value.workHours.push("")
  workRecord.value.workOutcome.push("")
  workRecord.value.workTotal=workRecord.value.workDate.length
  console.log(workRecord.value)
}
const delWork = (i) => {
  workRecord.value.workDate.splice(i,1)
  workRecord.value.workContent.splice(i,1)
  workRecord.value.workHours.splice(i,1)
  workRecord.value.workOutcome.splice(i,1)
  workRecord.value.workTotal=workRecord.value.workDate.length
  console.log(workRecord.value)
}
const selectWork=ref(0)
const editeWorRecord = (row) => {
  selectWork.value=0
  works.value=row
  workRecord.value={}
  workDialogVisible.value=true
  disable.value=true
}
const showForm = (i) => {
  selectWork.value=i
}
const editeWork = (i) => {
  disable.value=false
  console.log(works.value)
  ElMessage.success("现在可以编辑了！")
}
const saveWorkRecord = () =>{
  if (Object.keys(workRecord.value).length==0){
    let i=0
    for (let w of works.value.workOutcome){
      if (w!=""){
        i++
      }
    }
    works.value.workProgress=i
    if (works.value.workProgress==works.value.workTotal){
      works.value.endTime=new Date()
    }else {
      works.value.endTime=null
    }
    workRecord.value=works.value
    console.log(workRecord.value)
  }
  if (confirm("确认保存吗")){
    axios.post(BASE_URL+'/v1/workRecord/save',workRecord.value)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("保存成功")
            workRecord.value={}
            dialogVisible.value=false
            loadWordRecord()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const delWorkRecord = (id) => {
  if(confirm("确定要删除吗")){
    axios.delete(BASE_URL+'/v1/workRecord/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadWordRecord()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const handleClose = () => {
  if (confirm("确定要关闭吗")){
    dialogVisible.value=false
  }
}
</script>

<style scoped>

</style>